<template>
  <el-card>
    <div class="search">
      <span>订单号</span>
      <el-input v-model="order" placeholder="订单号"></el-input>
      <span>收货人</span>
      <el-input v-model="person" placeholder="收货人"></el-input>
      <span>手机号</span>
      <el-input v-model="phone" placeholder="手机号"></el-input>
      <span>订单状态</span>
      <el-select v-model="status" clearable placeholder="请选择">
        <el-option label="已受理" value="已受理"></el-option>
        <el-option label="派送中" value="派送中"></el-option>
        <el-option label="已完成" value="已完成"></el-option>
      </el-select>
    </div>
    <div class="block mt20 mb20">
      <span class="demonstration">选择时间</span>
      <el-date-picker
        v-model="value2"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        class="mr15"
      >
      </el-date-picker>
      <el-button type="primary" @click="inquire">查询</el-button>
    </div>

    <el-table :data="tableData" border style="width: 1150px">
      <el-table-column fixed prop="orderNo" label="订单号" width="100">
      </el-table-column>
      <el-table-column prop="deliveryTime" label="下单时间" width="180">
      </el-table-column>
      <el-table-column prop="phone" label="手机号" width="120">
      </el-table-column>
      <el-table-column prop="consignee" label="收货人" width="120">
      </el-table-column>
      <el-table-column prop="deliverAddress" label="配送地址" width="300">
      </el-table-column>
      <el-table-column prop="orderTime" label="送达时间" width="180">
      </el-table-column>
      <el-table-column prop="remarks" label="用户备注" width="200">
      </el-table-column>
      <el-table-column prop="orderAmount" label="订单金额" width="80">
      </el-table-column>
      <el-table-column prop="orderState" label="订单状态" width="120">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-popover placement="left" width="1000" trigger="click">
            <el-table :data="gridData">
              <el-table-column
                property="orderNo"
                label="订单号"
              ></el-table-column>
              <el-table-column
                property="deliveryTime"
                label="下单时间"
                width="160"
              ></el-table-column>
              <el-table-column
                property="consignee"
                label="收货人"
              ></el-table-column>
              <el-table-column
                property="deliverAddress"
                label="配送地址"
              ></el-table-column>
              <el-table-column
                property="orderTime"
                label="送达时间"
                width="160"
              ></el-table-column>
              <el-table-column
                property="remarks"
                label="用户备注"
              ></el-table-column>
              <el-table-column
                property="orderAmount"
                label="订单金额"
              ></el-table-column>
              <el-table-column
                property="orderState"
                label="订单状态"
              ></el-table-column>
            </el-table>
            <el-button
              @click="handleClick(scope.row.id)"
              type="text"
              size="small"
              slot="reference"
              style="margin-right: 10px"
              >查看</el-button
            >
          </el-popover>
          <el-button
            type="text"
            size="small"
            style="margin-left: 10px"
            @click="editorder(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="block mt20">
      <el-pagination
        @size-change="sizechange"
        @current-change="pagechange"
        :current-page="currentPage"
        :page-sizes="pagesizes"
        :page-size="pagesize"
        layout="total,sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog title="修改订单" :visible.sync="dialogFormVisible" width="500px">
      <p>
        <span>订单号</span>
        <el-input v-model="editnum" disabled></el-input>
      </p>
      <p>
        <span>下单时间</span>
        <el-input v-model="edittime" disabled></el-input>
      </p>
      <p>
        <span>手机号</span>
        <el-input v-model="editphone"></el-input>
      </p>
      <p>
        <span>收货人</span>
        <el-input v-model="editperson"></el-input>
      </p>
      <p>
        <span>配送地址</span>
        <el-input v-model="editadd"></el-input>
      </p>
      <p>
        <span>送达时间</span>
        <el-input v-model="edittimer" disabled></el-input>
      </p>
      <p>
        <span>用户备注</span>
        <el-input v-model="editremark"></el-input>
      </p>
      <p>
        <span>订单金额</span>
        <el-input v-model="editmoney"></el-input>
      </p>
      <p>
        <span>订单状态</span>
        <el-select v-model="editstate">
          <el-option label="已接单" value="已接单"></el-option>
          <el-option label="已送出" value="已送出"></el-option>
          <el-option label="已送达" value="已送达"></el-option>
          <el-option label="已完成" value="已完成"></el-option>
          <el-option label="已取消" value="已取消"></el-option>
        </el-select>
      </p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="cliok">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { orderlist, detail, edit } from "@/apis/order";
import { getYMDHSM } from "@/utils/utils";
export default {
  data() {
    return {
      total: 0,
      pagesizes: [5, 10, 15, 20],
      order: "",
      person: "",
      phone: "",
      status: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: "",
      tableData: [],
      currentPage: 1,
      pagesize: 5,
      gridData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      editnum: "",
      edittime: "",
      editphone: "",
      editperson: "",
      editadd: "",
      edittimer: "",
      editremark: "",
      editmoney: "",
      editstate: "",
    };
  },
  methods: {
    //查看订单详情
    handleClick(id) {
      this.gridData = [];
      detail({ id: id }).then((res) => {
        if (res.status == 200) {
          this.gridData.push(res.data.data);
          //转换时间格式
          for (const obj of this.gridData) {
            obj.deliveryTime = getYMDHSM(obj.deliveryTime);
            obj.orderTime = getYMDHSM(obj.orderTime);
          }
        }
      });
    },

    //查询功能
    inquire() {
      let time = [];
      for (const obj of this.value2) {
        time.push(getYMDHSM(obj));
      }
      orderlist({
        currentPage: this.currentPage,
        pageSize: this.pagesize,
        date: JSON.stringify(time),
        orderNo: this.order,
        consignee: this.person,
        phone: this.phone,
        orderState: this.status,
      }).then((res) => {
        console.log(res);
        for (const obj of res.data.data) {
          obj.deliveryTime = getYMDHSM(obj.deliveryTime);
          obj.orderTime = getYMDHSM(obj.orderTime);
        }
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
    },

    //分页功能
    sizechange(newsize) {
      this.pagesize = newsize;
      this.getlist();
    },
    pagechange(newpage) {
      this.currentPage = newpage;
      this.getlist();
    },

    //获取订单列表
    getlist() {
      orderlist({
        currentPage: this.currentPage,
        pageSize: this.pagesize,
      }).then((res) => {
        if (res.status == 200) {
          //转换时间格式
          for (const obj of res.data.data) {
            obj.deliveryTime = getYMDHSM(obj.deliveryTime);
            obj.orderTime = getYMDHSM(obj.orderTime);
          }
          this.tableData = res.data.data;
          this.total = res.data.total;
        }
      });
    },

    //点击编辑弹出模态框
    editorder(obj) {
      this.dialogFormVisible = true;
      this.id = obj.id;
      this.editnum = obj.orderNo;
      this.edittime = obj.deliveryTime;
      this.editphone = obj.phone;
      this.editperson = obj.consignee;
      this.editadd = obj.deliverAddress;
      this.edittimer = obj.orderTime;
      this.editremark = obj.remarks;
      this.editmoney = obj.orderAmount;
      this.editstate = obj.orderState;
    },

    //确认修改
    cliok() {
      this.$confirm("此操作将永久修改该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          edit({
            id: this.id,
            orderNo: this.editnum,
            orderTime: this.edittime,
            phone: this.editphone,
            consignee: this.editperson,
            deliverAddress: this.editadd,
            deliveryTime: this.edittimer,
            remarks: this.editremark,
            orderAmount: this.editmoney,
            orderState: this.editstate,
          }).then((res) => {
            if (res.data.code == 0) {
              this.$message({
                type: "success",
                message: "订单修改成功!",
              });
              this.dialogFormVisible = false;
              this.getlist();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },
  },

  created() {
    this.getlist();
  },
};
</script>

<style lang="less" scoped>
.el-card {
  .search,
  .block {
    span {
      margin-right: 15px;
    }
    .el-input {
      width: 200px;
      margin-right: 15px;
    }
  }
  .el-dialog {
    .el-dialog__body {
      padding: 10px 20px;
    }
    p {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      span {
        width: 80px;
        margin-right: 10px;
      }
      .el-input {
        width: 100%;
      }
    }
  }
}
</style>